<script lang="ts" setup>
import dayjs from 'dayjs';
import { reactive, onMounted } from 'vue';
import { getCurrentInstance, showModal, showLoading, hideLoading, showToast } from '@tarojs/taro';
import {
  ASSET_CHANGE_RECEIVE_STATUS,
  ASSET_CHANGE_RECEIVE_STATUS_COLOR,
  ASSET_CHANGE_RECEIVE_STATUS_BG_COLOR,
} from '/@/common/constant';
import {
  QUERY_CHANGE_RECEIVE_DETAIL,
  RETURN_CHANGE_RECEIVE_DETAIL,
} from '/@/api/modules/archive/archive-change-receive';
import { appEvents } from '/@/utils/events';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
};

const state = reactive<{
  info: AppSysAssetChange.Dto;
}>({
  info: {},
});

onMounted(() => {
  QUERY_CHANGE_RECEIVE_DETAIL({ changeId: params.id }).then((res) => {
    state.info = res.content;
  });
});
</script>

<template>
  <view class="asset-receive-detail app-page--1">
    <app-navbar title="领用详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="asset-receive-detail__wrapper">
        <nut-cell-group>
          <nut-cell center>
            <template v-slot:title>
              <view class="asset-receive-detail__module-title">领用详情</view>
            </template>
            <template v-slot:link>
              <text
                class="asset-receive-detail__status"
                :style="{
                  color: state.info.changeStatus
                    ? ASSET_CHANGE_RECEIVE_STATUS_COLOR[state.info.changeStatus]
                    : '#999',
                  backgroundColor: state.info.changeStatus
                    ? ASSET_CHANGE_RECEIVE_STATUS_BG_COLOR[state.info.changeStatus]
                    : '#999',
                }"
              >
                {{
                  state.info.changeStatus
                    ? ASSET_CHANGE_RECEIVE_STATUS[state.info.changeStatus]
                    : '-'
                }}
              </text>
            </template>
          </nut-cell>
          <nut-cell title="领用单号" :desc="state.info.changeCode || '-'" />
          <nut-cell
            title="领用时间"
            :desc="
              state.info.changeTime
                ? dayjs(Number(state.info.changeTime)).format('YYYY/MM/DD')
                : '-'
            "
          />
          <nut-cell title="领用部门" :desc="state.info.applicantDeptName || '-'" />
          <nut-cell title="领用人" :desc="state.info.applicantName || '-'" />
          <nut-cell title="备注信息" :desc="state.info.remark || '-'" />
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <view class="asset-receive-detail__module-title">档案明细</view>
          </nut-cell>
          <nut-cell>
            <nut-table
              class="asset-receive-edit__table"
              bordered
              striped
              :columns="[
                { title: '档案编号', key: 'assetCode' },
                { title: '档案名称', key: 'assetName' },
                { title: '所属部门', key: 'assetDeptName' },
              ]"
              :data="state.info.changeListDtoList"
            />
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <view class="asset-receive-detail__module-title">变动轨迹</view>
          </nut-cell>
          <nut-cell>
            <app-asset-change-operate-list :list="state.info.changeOperateDtoList" />
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>

    <view v-if="state.info.changeStatus === 3" class="app-page__footer">
      <nut-button
        block
        shape="round"
        type="info"
        @click="
          showModal({
            title: '确认归还',
            confirmText: '好的',
            content: '确认归还后，档案状态将变更为领用前状态',
            success: (res) => {
              if (!res.confirm) return;

              showLoading({ title: '加载中...' });

              RETURN_CHANGE_RECEIVE_DETAIL({ changeId: state.info.id }).then((res) => {
                QUERY_CHANGE_RECEIVE_DETAIL({ changeId: res.changeId }).then((res2) => {
                  state.info = res2.content;
                  appEvents.trigger('assetReceiveItemStatusChange', {
                    id: state.info.id,
                    status: state.info.changeStatus,
                  });
                  hideLoading();
                  showToast({ title: '归还成功', icon: 'success' });
                });
              });
            },
          })
        "
      >
        <text>领用归还</text>
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
